<template>
	<d2-container>
		<template slot="header">
			<el-form ref="queryForm" class="header-area" :model="queryForm" label-width="100px" style="height: auto">
				<template>
					<el-row>
						<el-col :span="6">
							<el-form-item label="入库单编号" prop="stockInOrderNo">
								<el-input type="text" v-model="queryForm.stockInOrderNo" placeholder="请输入入库单编号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="采购单编号" prop="purchaseOrderNo">
								<el-input type="text" v-model="queryForm.purchaseOrderNo" placeholder="请输入采购单编号"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="6">
							<el-form-item label="商品名称" prop="productName">
								<el-input type="text" v-model="queryForm.productName" placeholder="请输入商品名称"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="6">
							<el-form-item label="SKU名称" prop="productSkuName">
								<el-input type="text" v-model="queryForm.productSkuName" placeholder="请输入SKU名称"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
          <el-row>
            <el-col :span="6">
							<el-form-item label="SKU条形码" prop="productSkuBarCode">
								<el-input type="text" v-model="queryForm.productSkuBarCode" placeholder="SKU条形码"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="6">
						 <el-form-item label="入库状态" prop="stockInStatus">
							<el-select v-model="queryForm.stockInStatus" placeholder="请选择入库状态" style="width:100%">
								<el-option label="全部" value=""></el-option>
								<el-option label="未入库" value="1"></el-option>
								<el-option label="已入库" value="2"></el-option>
							</el-select>
						 </el-form-item>
					  </el-col>
					 <el-col :span="8">
						<el-form-item label="入库时间" prop="time">
							<el-date-picker
									v-model="time"
									type="datetimerange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="timestamp"
									align="right"
									:default-time="['00:00:00', '23:59:59']"
									 style="width:100%"
								></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
				</template>
			</el-form>
		</template>
		<template>
      <div class="table-header">
				<!-- <el-button type="primary" @click="batchConfirmStockIn()">批量确认入库</el-button> -->
			</div>
			<el-table stripe border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="45"></el-table-column>
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column prop="stockInOrderNo" label="入库单编号"></el-table-column>
				<el-table-column prop="relatedOrderNo" label="采购单编号"></el-table-column>
				<el-table-column prop="supplierName" label="供应商名称"></el-table-column>
				<el-table-column prop="stockType" label="库存类型" width="92">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.stockType == 1">线下库存</el-tag>
						<el-tag v-if="scope.row.stockType == 2">线上库存</el-tag>
					</template>
				</el-table-column>
        <el-table-column prop="shopName" label="门店名称"></el-table-column>
				<el-table-column prop="repositoryName" label="仓库名称"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="productCode" label="商品编码"></el-table-column>
				<el-table-column prop="productSkuName" label="SKU名称"></el-table-column>
				<el-table-column prop="productSkuCode" label="SKU编码"></el-table-column>
        <el-table-column prop="productSkuBarCode" label="SKU条形码"></el-table-column>
        <el-table-column prop="unitQuantity" label="采购数量"></el-table-column>
        <el-table-column prop="unitName" label="采购单位"></el-table-column>
        <el-table-column prop="unitRatio" label="系数"></el-table-column>
        <el-table-column prop="stockInedQuantity" label="已入库数量"></el-table-column>
				<el-table-column prop="tobeStockInQuantity" label="待入库数量"></el-table-column>
        <el-table-column prop="stockInQuantity" label="本次入库数量"></el-table-column>
        <el-table-column prop="stockInUnit" label="入库单位"></el-table-column>
        <el-table-column prop="stockInStatus" label="入库状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.stockInStatus == 1">未入库</el-tag>
						<el-tag v-if="scope.row.stockInStatus == 2">已入库</el-tag>
					</template>
				</el-table-column>
        <el-table-column prop="storekeeper" label="入库人"></el-table-column>
				<el-table-column prop="stockInTime" label="入库时间" :formatter="forDateStockIn"></el-table-column>
				<el-table-column fixed="right" label="操作" width="110">
          <template slot-scope="scope">
						<el-button v-if="scope.row.status==2 && scope.row.stockInStatus==1" type="success" plain size="small" @click.native.prevent="confirmStockIn(scope.row)">确认入库</el-button>
          </template>
        </el-table-column>
			</el-table>
		</template>
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
	</d2-container>
</template>

<script>
import { findPurchaseStockInDetailListByPage, confirmStockInPurchaseStockInOrder } from '@api/stockIn/stockInOrder'
import dayjs from 'dayjs'

export default {
  name: 'stockIn-purchaseStockInDetailList',
  data () {
    return {
      queryForm: {
        stockInOrderNo: '',
        purchaseOrderNo: '',
        productName: '',
        productSkuName: '',
        productSkuBarCode: '',
        stockInStatus: '',
        startTime: '',
        endTime: ''
      },
      time: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
	    tableData: [],
	    currentPage: 1,
	    pageSize: 10,
	    total: 0,
	    multipleSelection: []
    }
  },

  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.loading = true
      this.queryForm.startTime = this.time[0] == null ? '' : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss')
      this.queryForm.endTime = this.time[1] == null ? '' : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss')
      findPurchaseStockInDetailListByPage({
        stockInOrderNo: this.queryForm.stockInOrderNo,
        purchaseOrderNo: this.queryForm.purchaseOrderNo,
        productName: this.queryForm.productName,
        productSkuName: this.queryForm.productSkuName,
        productSkuBarCode: this.queryForm.productSkuBarCode,
        stockInStatus: this.queryForm.stockInStatus,
        startTime: this.queryForm.startTime,
        endTime: this.queryForm.endTime,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
        .then(res => {
          this.tableData = res.data.content
          this.total = res.data.total
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.fetchData()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    forDateStockIn (row, column) {
      return row.stockInTime == null ? '' : dayjs(row.stockInTime).format('YYYY-MM-DD HH:mm:ss')
    },
    resetPage () {
      (this.currentPage = 1), (this.pageSize = 10), (this.total = 0)
    },
    submitForm (formName) {
      this.resetPage()
      this.fetchData()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.time = []
      this.resetPage()
      this.fetchData()
    },
    // 确认入库
    confirmStockIn (row) {
      this.$confirm('确认入库SKU名称为【' + row.productSkuName + '】？').then(_ => {
        this.loading = true
        confirmStockInPurchaseStockInOrder({
          detailId: row.id
        })
          .then(res => {
            if (res.code == '000000') {
              this.$message({ message: res.message, type: 'success' })
              this.fetchData()
              this.loading = false
            } else {
              this.$message({ message: res.message, type: 'error' })
            }
          })
          .catch(err => {
            console.log('err', err)
            this.loading = false
          })
      })
    }
  }
}
</script>